---
sidebar_position: 1
---

import { PropTable } from '../../src/components/PropTable';

# Uncontrolled Environment

Using an uncontrolled environment to declare the state of your tree is mostly documented in
the [Get Started](/docs/getstarted) document. You need to declare your data by implementing
a [TreeDataProvider](/docs/api/interfaces/TreeDataProvider) that declares how tree items
can be loaded by React Complex Tree. Alternatively, you can just provide a
[StaticTreeDataProvider](/docs/api/classes/StaticTreeDataProvider) that contains a static
reference to all available data.

You can read more about implementing a custom TreeDataProvider
[implementing a custom TreeDataProvider here](/docs/guides/custom-data-provider), as well as
more details on how to use the static tree data provider.

An example using a StaticTreeDataProvider looks like this:

```jsx live
function App() {
  const items = {
    root: {
      index: 'root',
      isFolder: true,
      children: ['child1', 'child2'],
      data: 'Root item',
    },
    child1: {
      index: 'child1',
      children: [],
      data: 'Child item 1',
    },
    child2: {
      index: 'child2',
      isFolder: true,
      children: ['child3'],
      data: 'Child item 2',
    },
    child3: {
      index: 'child3',
      children: [],
      data: 'Child item 3',
    },
  };

  return (
    <UncontrolledTreeEnvironment
      dataProvider={new StaticTreeDataProvider(items, (item, data) => ({ ...item, data }))}
      getItemTitle={item => item.data}
      viewState={{}}
    >
      <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
    </UncontrolledTreeEnvironment>
  );
}
```

Note that for each item in the data structure representing the tree (`items` in this case), each object must have a field named `index` that has the same value as the key for that object.  The `children` array can only refer to these values as well.

## Component Props

The props for the `UncontrolledTreeEnvironment` are as follows:

<PropTable name="UncontrolledTreeEnvironment" />
